<template>
    	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="page-container">
    <view class="page-view">
      <!-- 告警卡片列表：v-for循环生成层对象数组 -->
      <view class="alert-list">
        <view 
          class="alert-card" 
          v-for="card in alertCardList" 
          :key="card.id"
        >
          <!-- 卡片顶部：时间 + 查看详情 -->
          <view class="top">
     
          
            <text class="time text11">
                   
             <text class="status-tag text11" :class="card.status">
          {{ getStatusText(card.status) }}
        </text>
              {{ card.time }}</text>
            <text class="text11" @click="gotoDetail(card.id)">查看详情</text>
          </view>

          <!-- 卡片内容区：直接使用单层对象属性 -->
          <view class="content">
            <!-- 设备名称 -->
            <view class="content-item">
              <view class="label">
                <text class="label-icon text10 iconfont icon-004laba-2"></text>
                <text class="label-text text10">设备名称：</text>
              </view>
              <text class="value text10">{{ card.deviceName }}</text>
            </view>

            <!-- 告警类型 -->
            <view class="content-item">
              <view class="label">
                <text class="label-icon text10 iconfont icon-004laba-2"></text>
                <text class="label-text text10">告警类型：</text>
              </view>
              <text class="value text10">{{ card.alertType }}</text>
            </view>

            <!-- 当前数值（可能异常） -->
            <view class="content-item">
              <view class="label">
                <text class="label-icon text10 iconfont icon-004laba-2"></text>
                <text class="label-text text10">当前数值：</text>
              </view>
              <text class="value text10" :class="{ abnormal: card.isAbnormal }">
                {{ card.currentValue }}
              </text>
            </view>

            <!-- 正常范围（可选，部分设备可能没有） -->
            <view class="content-item" v-if="card.normalRange">
              <view class="label">
                <text class="label-icon text10 iconfont icon-004laba-2"></text>
                <text class="label-text text10">正常范围：</text>
              </view>
              <text class="value text10">{{ card.normalRange }}</text>
            </view>

            <!-- 设备位置 -->
            <view class="content-item">
              <view class="label">
                <text class="label-icon text10  iconfont icon-004laba-2"></text>
                <text class="label-text text10">设备位置：</text>
              </view>
              <text class="value text10">{{ card.location }}</text>
            </view>

            <!-- 绑定的手机号 -->
            <view class="content-item">
              <view class="label">
                <text class="label-icon text10 iconfont icon-004laba-2"></text>
                <text class="label-text text10">联系方式：</text>
              </view>
              <text class="value text10">{{ card.phone }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>  <TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>

// 静态组件，无额外逻辑

import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"
  import { onShow } from '@dcloudio/uni-app';

import { familyMembers_alarmListApi } from "@/api/familyMembers"
import TabComponent from '@/components/tab-bar/index.vue'

	import { useShare } from '@/utils/useShare';
  import {getAppEnum} from "@/utils/appDataEnum"
		
		
		
const fontSizeStore = useFontSizeStore();
const router = useRouter();
const myRole=ref("")

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
	  const role = getApp()[getAppEnum.CurrentRole];
  return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}

const getStatusText = (status) => {
  const map = { emergency: '紧急', important: '重要', normal: '一般' };
  return map[status] || '未知';
}
// 简化后的数据结构：单层对象，去掉fields嵌套
const alertCardList = ref([])

onMounted(()=>{
  familyMembers_alarmListApi({id:""}).then((res)=>{
      if(res.code==200){
        alertCardList.value=res.data
      }
  })
})

 



// 查看详情
const gotoDetail = (cardId) => {
  router.push({
    name: "family_alarmDetail",
    params:{
      id:""
    }
  })
}
</script>

<style lang="less" scoped>
// 最外层页面容器：控制整体页面背景与布局
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa; // 浅灰背景，区分卡片与页面
  padding: 20rpx 16rpx; // 页面内边距，避免内容贴边

  // 中间容器：控制卡片列表的居中与宽度
  .page-view {
    max-width: 100%; // 限制最大宽度，适配大屏
    margin: 0 auto; // 水平居中

    // 告警列表容器：控制卡片间距
    .alert-list {
      display: flex;
      flex-direction: column;
      gap: 24rpx; // 卡片之间的垂直间距

      // 核心告警卡片：白色背景+红色边框（突出告警属性）
      .alert-card {
        background-color: #fff; // 白色背景，清晰展示信息
        border: 2rpx solid #efefef; // 红色边框，强化告警视觉
        border-radius: 16rpx; // 圆角设计，避免尖锐感
        padding: 24rpx; // 卡片内边距
        // box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); // 轻微阴影，提升层次感

        // 卡片顶部：时间 + 查看详情
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx; // 与下方内容区间距
          padding-bottom: 16rpx;
          border-bottom: 1rpx solid #f2f2f2; // 分隔线，区分上下区域

          .time {
            font-size: 24rpx;
            color: #666; // 时间颜色偏浅，不抢重点
          }

          // 查看详情：红色文字+交互提示
          & > text:not(.time) {
            font-size: 24rpx;
            color: #f5222d; // 红色文字，呼应告警主题
            cursor: pointer; // 指针样式，提示可点击
            &:hover {
              text-decoration: underline; //  hover 下划线，强化交互
            }
          }
        }

        // 卡片内容区：告警信息列表（含新增的“绑定的手机号”）
        .content {
          display: flex;
          flex-direction: column;
          gap: 20rpx; // 每行信息的垂直间距，新增项自动继承

          // 所有信息项统一样式（含手机号项）
          & > view {
            // display: flex;
            align-items: center; // 垂直居中，避免文字错位
            font-size: 26rpx;
            flex-wrap: wrap; // 防止手机号/长文本溢出（适配小屏）

            // 标签区：图标 + 标签文本（统一样式）
            .label {
              display: inline;
              align-items: center; // 图标与文本居中
              color: #666; // 标签颜色偏浅，突出数值
              white-space: nowrap; // 标签不换行，避免布局错乱

              .label-icon {
                font-family: "iconfont"; // 确保 iconfont 字体生效
                color: #f5222d; // 图标红色，强化告警标识
                margin-right: 12rpx; // 图标与文本间距
              }

              .label-text {
                font-weight: 500; // 标签文本加粗，区分数值
              }
            }

            // 数值区：统一基础样式，特殊数值可加类
            .value {
              color: #333; // 数值颜色深，清晰可读
              margin-left: 8rpx; // 与标签区间距，避免拥挤

              // 异常数值样式（如超压血压）
              &.abnormal {
                color: #f5222d;
                font-weight: 600;
              }

              // 手机号可选样式：若需突出，可加（默认与其他数值一致）
              &.phone {
                // 示例：如需手机号高亮，可开启以下配置
                // color: #1890ff;
                // font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
}

    .status-tag {
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        min-width: 80rpx;
        text-align: center;
        margin-right: 20rpx;

        &.emergency { background: #ffebee; color: #f44336; }
        &.important { background: #fff3e0; color: #ff9800; }
        &.normal { background: #e3f2fd; color: #2196f3; }
      }

      .iconfont{
        font-size: 20px;
      }
</style>